<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/7 10:03
    @Version 1.0
    @Description arguments-CSS函数
  -->
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {width: 200px;height: 200px;background: red}
    </style>
    <script>
        // function css(obj,name,value) {
        //     if (arguments.length == 2){
        //         return obj.style[name];
        //     }else {
        //         obj.style[name] = value;
        //     }
        // }
        // window.onload = function () {
        //     var oDiv = document.getElementById("div1");
        //     // css(oDiv,'width');
        //     // css(oDiv,'background','green');
        //     // alert(css(oDiv,'width'));
        //     css(oDiv,'background','green');
        // }

        function getStyle (obj,name){ //获取非行间样式
            if (obj.currentStyle){ //undefined 为false 兼容问题
                return obj.currentStyle[name];   //IE浏览器
            }else{
                return getComputedStyle(obj,false)[name];//chrome支持
            }
        }
        window.onload = function () {
            var oDiv = document.getElementById("div1");
                // alert(oDiv.style.width);//只能获取行间样式，值取不到
            // alert(oDiv.currentStyle.width);//IE
            // alert(getComputedStyle(oDiv,false).width) //chrome支持
            //第一个参数代表要获取那个元素的样式，第二个是解决FF较低版本的写法，而对于高版本的可以不用写

            alert(getStyle(oDiv,'width'));
        }
    </script>
</head>
<body>
<!--style表示行间样式-->
<!--    <div id="div1" style="width: 200px;height: 200px;background: red"></div>-->
  <div id="div1"></div>
</body>
</html>